<template>
  <view v-if="showSlide" ref="menuEl" :class="[mShowMenu ? 'menuOn' : '']" class="menu" :style="{ width: `${appConfig.width}px`, height: `${appConfig.height}px` }" @click.stop="toogleOpen(false)">
    <view v-if="mShowMenu" :style="{ width: `${slideWidth}px`, height: `${appConfig.height}px`, boxShadow: '3px 0 16px rgba(0,0,0,0.3)' }">
      <scroll-view :scroll-y="true" :style="{ width: `${slideWidth}px`, height: `${appConfig.height}px` }" @click.stop="">
        <slot name="menu"></slot>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// #ifdef APP-PLUS-NVUE
const animation = uni.requireNativePlugin('animation')
// #endif
export default {
  props: {
    showSlide: {
      type: Boolean,
      default: false
    },
    showMenu: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mShowMenu: false
    }
  },
  watch: {
    showMenu: {
      immediate: true, // 初始化的时候是否调用
      handler(newValue, _oldValue) {
        if (newValue) {
          this.mShowMenu = this.showMenu
          this.spinNvueAni()
        }
      }
    }
  },
  methods: {
    toogleOpen(type) {
      this.mShowMenu = type
      this.$emit('update:showMenu', type)
    },
    spinNvueAni() {
      // #ifdef APP-NVUE
      if (!this.$refs.bodyEl) return
      const testEl = this.$refs.bodyEl
      animation.transition(testEl, {
        styles: {
          transform: this.mShowMenu ? 'translateX(70%)   scale(0.8)' : 'translateX(0%)  scale(1)',
          transformOrigin: 'center center'
        },
        duration: 200, // ms
        timingFunction: 'ease',
        delay: 0 // ms
      }, () => {

      })
      setTimeout(() => {
        if (!this.$refs.menuEl) return
        const testElx = this.$refs.menuEl
        animation.transition(testElx, {
          styles: {
            transform: this.mShowMenu ? 'translateX(0%)' : 'translateX(-101%)',
            transformOrigin: 'center center'
          },
          duration: 200, // ms
          timingFunction: 'ease',
          delay: 0 // ms
        }, () => {

        })
      }, 50)
      // #endif
    }
  }
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.menu {
  will-change: transform, backdrop-filter;
  z-index: 999;
  transform: translateX(-101%);
  background: rgba(0, 0, 0, 0.6);
  backdropfilter: blur(3px);
}

.menu {
  position: fixed;
  left: 0;
  top: 0;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-property: transform;
  transition-delay: 0ms;
  transform: translateX(-101%);
  z-index: 999;
}

.menuOn {
  transform: translateX(0%);
}

.body {
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-property: transform;
  transition-delay: 0ms;
  transform: translateX(0%) scale(1);
}

.bodyOn {
  transform: translateX(70%) scale(0.8);
}

/* #endif */
</style>
